<template>
	<view class="wrap">

		<view class="from" v-if="userData">
			<view class="from-item">
				<text class="area">{{userData.countryNo}}</text>
				<input type="number" disabled :placeholder="userData.mobile" placeholder-class="phl" />
			</view>
			<view class="from-item">
				<input type="number" style="width: 350rpx;" v-model="userPhone.code" placeholder="请输入验证码"
					placeholder-class="phl" />
				<text class="code" @click="getCode">{{codeMessage}}</text>
			</view>

			<view class="from-item">
				<input type="number" maxlength="6" v-model="userPhone.password" placeholder="请输入交易密码" placeholder-class="phl" />
			</view>

			<button class="submit" @click="submit">确定</button>

		</view>
		<!-- <view class="from" v-if="userData&&userData.isSetTransactionPassword == 0">


			<view class="from-item">
				<input type="number" maxlength="6" v-model="userPhone.password" placeholder="请创建交易密码" placeholder-class="phl" />
			</view>

			<button class="submit" @click="submitOne">确定</button>

		</view> -->
	</view>
</template>

<script setup>
	import {
		smsCode,
		user,
		updateTransactionPassword
	} from '@/util/api.js'
	import {
		ref
	} from "vue";

	import {
		onShow
	} from '@dcloudio/uni-app'
	onShow(() => {
		getUser()
	})
	
	const userPhone = ref({
		code: "",
		password: ""

	})
	const newPassWord = ref()
	const userData = ref()
	// 获取当前登录用户信息
	const getUser = async () => {
		const result = await user()
		console.log(result)
		if (result.code == 200) {
			

			userData.value = result.data
		} else {
			userData.value = null
		}
	}
	// 获取短信
	const codeMessage = ref("获取验证码")
	let bok = true
	let num = 60
	const getCode = async ()=>{
		
		if(!bok) return false;
		bok = false
		uni.showLoading({
			mask:true
		})
		const result = await smsCode({countryNo:userData.value.countryNo,mobile:userData.value.mobile})
		uni.hideLoading()
		if(result.code!=200){
			bok = true
			codeMessage.value = "获取验证码"
			return false
		}
		let timer = setInterval(()=>{
			num--
			codeMessage.value = `${num}秒后重试`
			if(num<=0){
				bok = true
				codeMessage.value = "获取验证码"
				clearInterval(timer)
			}
		},1000)
	}
	// 第一次设置交易密码
	const submitOne = async () => {
		if (!userPhone.value.password) {
			uni.showModal({
				title: "提示",
				content: "请输入交易密码",
				showCancel: false
			})
			return false;
		}
		if (userPhone.value.password.length!==6) {
			uni.showModal({
				title: "提示",
				content: "请输入6位交易密码",
				showCancel: false
			})
			return false;
		}
		var re = /^[0-9]+.?[0-9]*/;//判断字符串是否为数字//判断正整数/[1−9]+[0−9]∗]∗/ 

		if (!re.test(userPhone.value.password)) {
			uni.showModal({
				title: "提示",
				content: "请输入6位数字的交易密码",
				showCancel: false
			})
			return false;
		}
		const result = await updateTransactionPassword({
			password: userPhone.value.password,
			code:""
		})
		if (result.code == 200) {
			uni.showModal({
				title: "提示",
				content: "修改成功",
				showCancel: false,
				success: () => {
					uni.navigateBack()
				}
			})
		}
	}
	const submit = async () => {

		if (!userPhone.value.password) {
			uni.showModal({
				title: "提示",
				content: "请输入密码",
				showCancel: false
			})
			return false;
		}
		if (!userPhone.value.code) {
			uni.showModal({
				title: "提示",
				content: "请输入验证码",
				showCancel: false
			})
			return false;
		}
		

		const result = await updateTransactionPassword(userPhone.value)
		if (result.code == 200) {
			uni.showModal({
				title: "提示",
				content: "修改成功",
				showCancel: false,
				success: () => {
					uni.navigateBack()
				}
			})
		}

	}
	
</script>

<style lang="scss">
	.from {
		margin-top: 38rpx;
		padding: 0 38rpx;

		.from-item {
			width: 519rpx;
			height: 100rpx;
			background: #F6F6FF;
			border-radius: 71rpx;
			margin-bottom: 38rpx;
			display: flex;
			align-items: center;
			padding: 0 77rpx;

			.phl {
				color: #999;
				font-size: 28rpx;
			}

			.area {
				display: block;
				margin-right: 38rpx;
				color: #333333;
				font-size: 28rpx;
				font-weight: bold;
			}

			.code {
				font-weight: bold;
				display: block;

				color: #333333;
				font-size: 28rpx;
			}
		}

		.submit {
			width: 673rpx;
			height: 100rpx;
			background: #0265FF;
			box-shadow: 0px 12rpx 23rpx 2rpx rgba(0, 0, 0, 0.16);
			border-radius: 71rpx;
			margin: 77rpx auto 38rpx;
			border: none;
			color: #fff;
			font-weight: 800;
			font-size: 38rpx;
			line-height: 100rpx;
		}

	}

	.wrap {
		overflow: hidden;
	}
</style>